From: Joonas Henriksson <joonas.henriksson@gmail.com>
Date: Tue, 19 Nov 2019 17:40:09 +0000 (+0200)
Subject: theme: Add message close button styling
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~781^2^2~365
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=18421e8aedb2a5f2ca609f19c96b609ac47f2504;p=gnome-shell.git

theme: Add message close button styling

Since the notification message close button had no border, or mouse
over effect, there was no way to determine whether the mouse cursor
were over the button.

Improve this by adding a message-close-button class for the close
button, and a styling for its hovered state, based on media control
button styling.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/855
---

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index bddcedf24..cd6eea7d9 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1152,6 +1152,11 @@ StScrollBar {
             padding: 10px;
           }
 
+          .message-close-button {
+            color: lighten($fg_color, 15%);
+            &:hover { color: darken($fg_color, 10%); }
+          }
+
           .message-media-control {
             padding: 12px;
             color: lighten($fg_color, 15%);
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 3188d0377..e798d0bfc 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -357,7 +357,10 @@ var Message = GObject.registerClass({
 
         let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
                                       icon_size: 16 });
-        this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
+        this._closeButton = new St.Button({
+            style_class: 'message-close-button',
+            child: closeIcon, opacity: 0,
+        });
         titleBox.add_actor(this._closeButton);
 
         this._bodyStack = new St.Widget({ x_expand: true });